<script setup lang="js">
    import { reactive,onMounted } from 'vue';
    import axios from 'axios';

    //-:配置数据
    const config = reactive({
        radius: '40%',
        activeRadius: '45%',
        data: [],
        digitalFlopStyle: {
            fontSize: 20
        }
    })
    //-:获取数据
    function getData(){
        axios.get('/api/queryAllCardioAge')
            .then((response)=>{
                console.log(response.data)
                if(response.data.code=="200"){
                   config.data = response.data.data
                }
            })
            .catch((error)=>{
                console.log(error)
            })
    }
    onMounted(()=>{
        getData();
    })
</script>
<template>
    <dv-border-box-1 class="dv-border-box-1">
        <div class="dv_div">
        <div class="div_son">
            <h3 style="padding-top: 60px;">不同年龄段患有心血管疾病的百分比</h3>
            <dv-active-ring-chart class="dv-active-ring-chart" :config="config" style="width:100%;height:300px"/>
        </div>
        <div class="div_son">
            <h3 style="padding-top: 60px;">不同年龄段患有心血管疾病的百分比</h3>
            <dv-active-ring-chart class="dv-active-ring-chart" :config="config" style="width:100%;height:300px"/>
        </div>
    </div>
    </dv-border-box-1>

</template>
<style lang="css" scoped>
    .dv_div{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
    .div_son{
        width: 100%;
        height: 100%;
    }
    .dv-active-ring-chart{
       
    }
</style>